/**
 * 滚动性能优化样式
 * 提供跨浏览器的滚动优化
 */

.scroll-optimized {
  // 标准滚动行为
  scroll-behavior: smooth;
  
  // WebKit 滚动优化 (Safari, Chrome)
  -webkit-overflow-scrolling: touch;
  
  // Firefox 滚动条样式
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 #f1f1f1;
  
  // WebKit 滚动条样式 (Chrome, Safari, Edge)
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  
  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
  }
  
  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
    
    &:hover {
      background: #a8a8a8;
    }
  }
  
  // 表格滚动优化
  &.el-table__body-wrapper {
    // 确保表格内容可以正常滚动
    overflow: auto;
    
    // 优化表格滚动性能
    will-change: scroll-position;
    
    // 防止滚动时出现闪烁
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  // 对话框滚动优化
  &.el-dialog__body {
    // 确保对话框内容可以正常滚动
    overflow: auto;
    max-height: 60vh;
    
    // 优化滚动性能
    will-change: scroll-position;
  }
  
  // 抽屉滚动优化
  &.el-drawer__body {
    // 确保抽屉内容可以正常滚动
    overflow: auto;
    
    // 优化滚动性能
    will-change: scroll-position;
  }
}

// 全局滚动优化
html {
  scroll-behavior: smooth;
}

body {
  // 防止页面滚动时的闪烁
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  
  // 优化滚动性能
  will-change: scroll-position;
}

// 移动端滚动优化
@media (max-width: 768px) {
  .scroll-optimized {
    // 移动端使用更细的滚动条
    scrollbar-width: none;
    
    &::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }
    
    // 移动端触摸滚动优化
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}
